<template>
  <div>
    <div v-if="device==='desktop'" class="dswd-footer">
      <div class="dswd-container">
        <div class="dswd-flex">
          <div class="footer-logo">
            <img
              src="../../assets/image/footer/footer-logo.png"
              alt="footer-logo"
            >
          </div>
          <div class="footer-content">
            <ul>
              <li>
                <h5 class="footer-title">产品体系</h5>
                <!-- <p class="footer-link">智绘地暖</p>
                <p class="footer-link">结构快捷计算</p> -->
                <p class="footer-link hover-link" @click="toWeb('/TransBIM.html')">TransBIM</p>
              </li>
            </ul>
            <ul>
              <li>
                <h5 class="footer-title">关于我们</h5>
                <p class="footer-link hover-link" @click="toWeb('/aboutUs.html')">公司简介</p>
                <p class="footer-link hover-link" @click="toWeb('/aboutUs.html')">解决方案</p>
              </li>
            </ul>
            <ul>
              <li>
                <h5 class="footer-title">加入我们</h5>
                <p class="footer-link hover-link" @click="toWeb('/joinUs.html')">社会招聘</p>
                <p class="footer-link hover-link" @click="toWeb('/joinUs.html')">校园招聘</p>
              </li>
            </ul>
            <ul>
              <li>
                <h5 class="footer-title">联系方式</h5>
                <!-- <p class="footer-link">电话：400-800-8800</p> -->
                <p class="footer-link">邮箱：dazhihui@cndswd.com</p>
                <p class="footer-link">第三维度（上海）软件科技有限公司</p>
                <p class="footer-link">第三维度（河南）软件科技有限公司</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <p class="footer-copyright">
        Copyright © 2020第三维度（上海）软件技术有限公司. All Rights Reserved 豫ICP备20006075号-1务
      </p>
      <p class="footer-copyright">技术支持：第三维度（上海）软件科技有限公司</p>
    </div>
    <div v-if="device==='ipad' || device==='mobile'" class="dswd-m-footer">
      <div class="dswd-m-container">
        <p class="footer-copyright">
          Copyright © 2020第三维度（上海）软件技术有限公司. All Rights Reserved 豫ICP备20006075号-1务
        </p>
        <p class="footer-copyright">技术支持：第三维度（上海）软件科技有限公司</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  methods: {
    toWeb(path) {
      window.open(path, '_self')
    }
  }
}
</script>

<style scoped lang="scss">
.dswd-footer {
  border-top: 1px solid #f7f7f7;
  background-size: 100% 100%;
  width: 100%;
  box-sizing: border-box;
  padding-top: 60px;
  padding-bottom: 15px;
  .dswd-container{
    padding-bottom: 56px;
  }
  .dswd-flex {
    display: flex;
    justify-content: space-between;
    .footer-logo {
      width: 66px;
      height: 66px;
      img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
    }
    .footer-content {
      margin-left: 234px;
      width: calc(100% - 300px);
      display: flex;
      justify-content: space-between;
      .footer-title {
        font-size: 16px;
        font-weight: 400;
        color: #222222;
        line-height: 22px;
        padding-bottom: 14px;
      }
      .footer-link{
        margin-top: 12px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
      }
      .hover-link:hover{
        cursor: pointer;
        color: #078FD8;
      }
    }
  }
  .footer-copyright{
    margin-top: 11px;
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    line-height: 17px;
    text-align: center;
  }
}
.dswd-m-footer {
  width: 100%;
  box-sizing: border-box;
  padding-top: 30px;
  padding-bottom: 10px;
  .footer-copyright{
    margin-top: 10px;
    font-size: 10px;
    font-weight: 400;
    color: #999999;
    line-height: 14px;
    text-align: center;
  }
}
</style>
